@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

*, *::after, *::before {
	@include box-sizing(border-box);
}

html {
	font-size: 62.5%;

	* {
		@include font-smoothing;
	}
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-3;
}

body, html {
	/* prevent horizontal scrolling */
	overflow-x: hidden;
}

a {
	color: $color-2;
	text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */

main {
	position: relative;
	z-index: 2;

	/* fix bug on iOS */
	height: 100vh;
	overflow-y: auto;
	
	-webkit-overflow-scrolling: touch;
	padding: 200px 5%;
	background-color: $color-2;
	
	/* Force Hardware Acceleration in WebKit */
	@include transform(translateZ(0));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	@include transition(transform $animation-duration);
	@include transition-timing-function(cubic-bezier(.91,.01,.6,.99)); 

	h1, p {
		text-align: center;
	}
	
	h1 {
		font-size: 2.6rem;
		margin-bottom: 1em;
	}

	p {
		font-family: $secondary-font;
		color: lighten($color-2, 20%);
		max-width: 450px;
		margin: 0 auto;
		line-height: 1.6;
	}

	.navigation-is-open & {
		@include transform(translateX(100%));
	}

	@include MQ(M) {
		padding: 250px 10%;

		h1 {
			font-size: 3.6rem;
		}

		p {
			font-size: 2rem;
		}
	}
}

.cd-nav-trigger {
	position: fixed;
	z-index: 3;
	left: 5%;
	top: 20px;
	height: 54px;
	width: 54px;
	background-color: $color-1;
	border-radius: 50%;
	
	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

	@include transition(transform $animation-duration - 0.2s);

	.cd-nav-icon {
		/* icon created in CSS */
		position: absolute;
		@include center; // mixin inside partials > _mixins.scss
		width: 22px;
		height: 2px;
		background-color: $color-3;

		&::before, &:after {
			/* upper and lower lines of the menu icon */
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%; 
			background-color: inherit;

			/* Force Hardware Acceleration in WebKit */
			@include transform(translateZ(0));
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;

			@include transition(transform $animation-duration - 0.2s, width $animation-duration - 0.2s, top .3s);
		}

		&::before {
			@include transform-origin(right top);
			@include transform(translateY(-6px));
		}

		&::after {
			@include transform-origin(right bottom);
			@include transform(translateY(6px));
		}

	}

	.no-touch &:hover .cd-nav-icon::after {
		top: 2px;
	} 

	.no-touch &:hover .cd-nav-icon::before {
		top: -2px;
	} 

	svg {
		position: absolute;
		top: 0;
		left: 0;
	}

	circle {
		/* circle border animation */
		@include transition(stroke-dashoffset $animation-duration - 0.3s 0s);
	}

	.navigation-is-open & {
		/* rotate trigger when navigation becomes visible */
		@include transform(rotate(180deg));

		.cd-nav-icon::after, 
		.cd-nav-icon::before {
			/* animate arrow --> from hamburger to arrow */
			width: 50%;
			@include transition(transform $animation-duration - 0.2s, width $animation-duration - 0.2s);
		}

		.cd-nav-icon::before {
			@include transform(rotate(45deg));
		}

		.cd-nav-icon::after {
			@include transform(rotate(-45deg));
		}

		.no-touch &:hover .cd-nav-icon::after,
		.no-touch &:hover .cd-nav-icon::before {
			top: 0;
		} 

		circle {
			stroke-dashoffset: 0;
			@include transition(stroke-dashoffset $animation-duration - 0.3s 0.3s);
		}
	}

	@include MQ(L) {
		top: 40px;
	}
}

.cd-nav {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: $color-1;
	visibility: hidden;
	@include transition(visibility 0s $animation-duration);

	.cd-navigation-wrapper {
		/* all navigation content */
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 40px 5% 40px calc(5% + 80px);
		
		/* Force Hardware Acceleration in WebKit */
		@include transform(translateZ(0));
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		@include transform(translateX(-50%));
		@include transition(transform $animation-duration);
		@include transition-timing-function(cubic-bezier(.86,.01,.77,.78));
	}

	.navigation-is-open & {
		visibility: visible;
		@include transition(visibility 0s 0s);
		
		.cd-navigation-wrapper {
			@include transform(translateX(0));
			@include transition(transform $animation-duration - 0.2s);
			@include transition-timing-function(cubic-bezier(.82,.01,.77,.78));
		}
	}

	h2 {
		position: relative;
		margin-bottom: 1.7em;
		font-size: 1.3rem;
		font-weight: 800;
		color: darken($color-1, 15%);
		text-transform: uppercase;

		&::after {
			/* bottom separation line */
			content: '';
			position: absolute;
			left: 0;
			bottom: -20px;
			height: 1px;
			width: 60px;
			background-color: currentColor;
		}
	}

	.cd-primary-nav {
		margin-top: 60px;

		li {
			margin: 1.6em 0;
		}

		a {
			font-family: $secondary-font;
			font-size: 2.4rem;
			color: rgba($color-3, .3);
			display: inline-block;

			&.selected {
				color: $color-3;
			}

			.no-touch &:hover {
				color: $color-3;
			}
		}
	}

	.cd-contact-info {
		margin-top: 80px;

		li {
			font-family: $secondary-font;
			margin-bottom: 1.5em;
			line-height: 1.2;
			color: rgba($color-3, .3);
		}

		a {
			color: $color-3;
		}

		span {
			display: block;
		}

		li, a, span {
			font-size: 1.6rem;
		}
		
	}

	@include MQ(L) {

		.cd-navigation-wrapper {
			padding: 62px 20%;
			@include clearfix;
		}

		.cd-half-block {
			@include column(.5); // see partials > _layout.scss
		}

		.cd-primary-nav {
			margin-top: 0;
		}

		h2 {
			font-size: 1.5rem;
			margin-bottom: 5.6em;
		}

		.cd-primary-nav {

			li {
				margin: 2em 0;
			}

			a {
				font-size: 4.4rem;
			}
			
		}

		.cd-contact-info {
			margin-top: 120px;
			text-align: right;

			li {
				margin-bottom: 2.4em;
			}

			li, a, span {
				font-size: 2rem;
			}
		}
	}
}

.no-js main {
	height: auto;
	overflow: visible;
}  

.no-js .cd-nav {
	position: static;
	visibility: visible;

	.cd-navigation-wrapper {
		height: auto;
		overflow: visible;
		padding: 100px 5%;
		@include transform(translateX(0));
	}
}